<template>
	<view class="merchantact">
		<view class="top">
			<view class="header">
				<searchCom @searchClick="searchFun"></searchCom>
			</view>
			<view class="dealtype">
				<contentSw :swlist="conSwlist" @conswitch="conswitch"></contentSw>
			</view>
		</view>
		<noData v-show="shoprateList.length == 0"></noData>
		<scroll-view v-show="shoprateList.length > 0" class="list" scroll-y="true" @scrolltolower="getShopratelist">
			<view class="list_eve" @click="navdetail(item)" v-for="(item,index) in shoprateList" :key="index">
				<view class="list_title">
					<view class="title_t">
						<text class="list_title_one">{{item.shop_name}}</text>
						<text :class="statusColor[item.status]">{{item.statusText}}</text>
					</view>
					<view class="title_id">
						<view>
							<text>商户UID: {{item.uid}}</text><text>门店UID: {{item.suid}}</text>
						</view>
						<view class="title_idState">{{item.payStatusText}}</view>
					</view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">堂食/台卡费率(万分数)</view>
						<view class="item_text">{{item.rate}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { shopratelist } from '../../api/index.js'
	import contentSw from '../../components/workbench/contentSw.vue'
	import noData from '../../components/data/nodata.vue'
	import searchCom from '../../components/search/searchCom.vue'
	export default {
		data() {
			return {
				searchVal:'',
				conSwlist:[{name:'全部'},{name:'审核中'},{name:'审核失败'},{name:'审核通过'}],
				shoprateList:[],
				status:-1,
				page:1,
				limit:20,
				isLoad:false,//判断之前的请求是否还未结束
				isAll:false,//判断是否加载了全部数据
				statusColor:{
					'1':'bluefont',//审核通过
					'0':'orangefont',//审核中
					'2':'redfont' //审核失败
				}
			}
		},
		onShow:function(){
			this.page = 1;
			this.isLoad = false;
			this.isAll = false;
			this.getShopratelist(true)
		},
		methods: {
			conswitch:function(data){
				let index = data.index;
				let obj = {
					'0':-1,
					'1':0,
					'2':2,
					'3':1
				}
				this.status = obj[index];
				this.page = 1;
				this.isLoad = false;
				this.isAll = false;
				this.getShopratelist(true)
			},
			searchFun:function(data){
				this.searchVal = data.searchComval;
				this.page = 1;
				this.isLoad = false;
				this.isAll = false;
				this.getShopratelist(true)
			},
			navdetail:function(item){
				uni.navigateTo({
					url: '../meractdetail/meractdetail?id='+item.suid
				});
			},
			getShopratelist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				shopratelist({
					status: that.status,
					page: that.page,
					limit: that.limit,
					search:that.searchVal
				}).then((res) => {
					console.log(res);
					if(res.code == 0){
						if(isSw === true){//判断是否重新加载数据
							that.shoprateList = that.dealList(res.data);
						}else{
							that.shoprateList = that.shoprateList.concat(that.dealList(res.data));
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.length < that.limit){
							that.isAll = true;
						}
					}else{
						this.isLoad = false;
					}
				})
			},
			dealList:function(data){
				let statusObj = {
					'0':'审核中',
					'1':'审核通过',
					'2':'审核失败'
				}
				let list = data.map((item,index,arr)=>{
					return {
						suid:item.suid,
						shop_name:item.shop_name,
						status:item.status,
						statusText:statusObj[item.status],
						uid:item.uid,
						realname:item.realname,
						rate:item.rate,
						payStatusText:item.pay_rate_status==3?'生效':'未生效'  //1 已受理 2记录作废(当天重复申请修改,只受理最后一次,其余记录作废) 3 修改成功 4 修改失败
					};
				});
				console.log(list)
				return list
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../meractapplication/meractapplication'
			});
		},
		components:{
			searchCom,
			noData,
			contentSw
		}
	}
</script>

<style lang="scss" scoped>
	.nodata{
		padding-top: 250rpx;
	}
	.merchantact{
		font-size: $uni-font-size-base;
		height: 100%;
		background-color: #F5F5F5;
		position: relative;
		.top{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 184rpx;
			.dealtype{
				background-color: #FFFFFF;
			}
		}
		.list{
			box-sizing: border-box;
			height: 100%;
			padding: 184rpx 30rpx 0 30rpx;
			.list_eve{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				border-radius: $uni-border-radius-lg;
				margin-top: 30rpx;
				.list_title{
					padding: 30rpx 0;
					border-bottom: 1rpx $uni-border-color-e5 solid;
					.title_t{
						display: flex;
						justify-content: space-between;
						.list_title_one{
							font-weight: bold;
						}
					}
					.title_id{
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;
						font-size: $uni-font-size-sm;
						.title_idState{
							color: #666666;
						}
						text{
							color: #999999;
							margin-right: 10rpx;
						}
					}
					
				}
				.list_con{
					padding: 15rpx 0;
					.list_item{
						display: flex;
						padding: 15rpx 0;
						.item_title{
							margin-right: 30rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>